<template>
    <div class="goods-car app-wrapper">
        <div class="chanel-name text-right clearfix">
            <h5 class="pull-left">名人字画私人订制</h5><a href="#">编辑</a>
        </div>
        <div class="goods-wrapper">
            <div class="goods-list">
                <ul>
                    <li 
                        v-for="(item) in goodsList"
                        :key="item.id"
                    >
                        <router-link to="/goodscar" class="media clearfix">
                            <div class="media-object pull-left"><img :src="item.url" alt=""></div>
                            <div class="media-body over-hidden">
                                <h4 class="media-heading">{{item.name}}</h4>
                                <p class="media-desc"><span>￥{{item.origin}}</span></p>
                                <div class="media-footer clearfix">
                                    <span class="pull-left">￥{{item.price}}</span>
                                    <span>X{{item.nums}}</span>
                                </div>
                            </div>
                            <span class="modal-checkbox-circle"
                                :class="{'active': item.isChecked}"
                                @click.stop.prevent="checkedItem(item)"
                            ><b></b></span>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>

        <div class="submit-bar text-right clearfix">
            <p class="pull-left"><span class="modal-checkbox-circle"
                :class="{'active': totalNums == goodsList.length}"
                @click="toggleAll"
            ><b></b></span>全选</p>
            合计: <span class="color-red">￥{{totalPrices}}</span>
            <button type="button" class="button button-fill">结算({{totalNums}})</button>
        </div>
    </div>
</template>

<script>
let url = require('@/assets/img/goods_1.png');
export default {
  components: {},
  props: {},
  data() {
    return {
        goodsList: [
            {id: 1, name: '作品名称: 山里云中歌', origin: '4500', price: '3500', nums: 1, url: url, isChecked: false},
            {id: 2, name: '作品名称: 山里云中歌', origin: '4500', price: '3500', nums: 1, url: url, isChecked: false},
            {id: 3, name: '作品名称: 山里云中歌', origin: '4500', price: '3500', nums: 1, url: url, isChecked: false},
            {id: 4, name: '作品名称: 山里云中歌', origin: '4500', price: '3500', nums: 1, url: url, isChecked: false},
            {id: 5, name: '作品名称: 山里云中歌', origin: '4500', price: '3500', nums: 1, url: url, isChecked: false}
        ]
    };
  },
  computed: {
      totalNums(){
          return this.goodsList.filter(item=>item.isChecked).reduce((total, item)=>{
              return total += item.nums;
          },0);
      },
      totalPrices(){
          return this.goodsList.filter(item=>item.isChecked).reduce((total, item)=>{
              return total += parseFloat(item.price);
          },0); 
      }
  },
  methods: {
      checkedItem(item){
          item.isChecked = !item.isChecked;
      },
      toggleAll(){
          let isCheckedAll = !(this.totalNums == this.goodsList.length);

          this.goodsList.forEach(item=>(item.isChecked = isCheckedAll));

      }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import './index.scss';
.goods-car {

    .chanel-name {
        height: 80px;
        padding: 0 35px;
        font-size: 28px;
        line-height: 80px;
        color: #2a2a2a;

        > a {
            color: $red;
        }
    }

    .media {
        padding-left: 60px;
        .modal-checkbox-circle {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    
}


</style>